.container {
  .top {
    height: 290px;
    background-image: linear-gradient(0deg, #FAFAFA 0%, #3F8AFF 100%, #438CF5 100%);
    padding: 26px 20px 0;

    &-userinfo {
      display: flex;

      &-left {
        width: 0;
        flex: 1;

        &-company {
          font-size: $fontSizeLg;
          color: $colorWhite;
          white-space: nowrap;
        }

        &-operation {
          margin-top: 8px;

          &-username {
            font-size: $fontSize2Xl;
            color: $colorWhite;
            font-weight: 600;
          }
        }

        &-id {
          font-size: $fontSize;
          color: $colorWhite;
          line-height: 22px;
          margin-top: 10px;
        }
      }

      &-right {
        flex-shrink: 0;

        &-avatar {
          border-radius: 50%;
          overflow: hidden;

          image {
            width: 82px;
            height: 82px;
            vertical-align: bottom;
          }
        }
      }
    }

    &-total {
      margin-top: 14px;
      background: $colorWhite;
      box-shadow: 0px 2px 5px 1px rgba(3, 3, 14, 0.1);
      border-radius: 8px;
      padding: 12px;

      &-title {
        font-size: $fontSize;
        color: $textColorTitle;
        line-height: 22px;
        font-weight: 600;
        padding-bottom: 12px;
      }

      &-main {
        display: grid;
        grid-column-gap: 12px;
        grid-template-columns: repeat(2, 1fr);

        &-item {
          background: rgba(1, 71, 235, 0.15);
          border-radius: 8px;
          padding: 2px 12px 6px;

          &-top {
            display: flex;
            justify-content: space-between;

            &-title {
              font-size: $fontSize;
              color: $textColorTitle;
            }

            &-icon {
              padding-top: 6px;
              height: 16px;
              display: flex;

              image {
                width: 16px;
                height: 16px;
                vertical-align: bottom;
              }
            }
          }

          &-bottom {
            &-text {
              font-family: $fontFamilyEn;
              font-size: $fontSize;
              color: $textColorTitle;
              line-height: 22px;
              font-weight: 600;
            }

            &-process {
              margin: 0 auto;
              height: 4px;
              border-radius: 99px;
              position: relative;
              overflow: hidden;
              background: rgba(1, 71, 235, 0.20);

              &-bar {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 5;
                height: 100%;
                background-color: #0147EB;
                border-radius: 99px;
              }
            }
          }

          &-main {
            display: flex;

            &-label {
              font-family: $fontFamilyEn;
              font-size: $fontSize;
              color: $textColorTitle;
              line-height: 22px;
              font-weight: 600;
              margin-right: 10px;
            }

            &-status {
              font-size: $fontSize;
              color: $errorColor;
              line-height: 22px;
            }
          }
        }
      }
    }
  }

  .module {
    padding: 16px 20px;

    &-title {
      font-size: $fontSize;
      color: $textColorTitle;
      line-height: 22px;
      font-weight: 600;
      padding-bottom: 12px;
    }

    &-item {
      background: $colorWhite;
      box-shadow: 0px 2px 5px 1px rgba(3, 3, 14, 0.1);
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 12px;

      &-title {
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-left {
          display: flex;
          align-items: center;

          &-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
          }

          &-status1 {
            background: $successColor;
          }

          &-status0 {
            background-color: $errorColor;
          }

          &-title {
            margin-left: 12px;
            font-size: $fontSize;
            color: $textColorTitle;
            line-height: 22px;
            font-weight: 600;
          }
        }

        &-right {
          font-family: SourceHanSansCN-Regular;
          font-size: 12px;
          letter-spacing: 0;
          line-height: 20px;
          font-weight: 400;
          padding: 0 8px;
          border-radius: 99px;
        }

        &-right-status0 {
          color: #0147EB;
          background: rgba(1, 71, 235, 0.15);
        }
		
		&-right-status1 {
		  color: $errorColor;
		  background: rgba(242, 38, 53, 0.15);
		}

        &-right-status2 {
          color: $successColor;
          background: rgba(87, 194, 45, 0.15);
        }
      }

      &-main {
        padding: 0 22px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        &-item {
          &-label {
            font-size: $fontSize;
            color: $textColor;
            line-height: 22px;
            padding-bottom: 4px;
          }

          &-value {
            font-family: $fontFamilyEn;
            font-size: $fontSize;
            color: $textColorTitle;
            letter-spacing: 0;
            line-height: 22px;
            font-weight: 600;
          }
        }
      }
    }
  }
}
